<template>
  <div>count：{{ count }}</div>
  <button @click="add({amount: 10})">click add me</button>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    // add () {
    //   // this.$store.commit('increment', 2)
    //   // this.$store.commit('increment', {
    //   //   amount: 10
    //   // })
    //   // 对象风格的提交方式
    //   this.$store.commit({
    //     type: 'increment',
    //     amount: 10
    //   })
    // }
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
    // ...mapMutations([
    //   'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    //   // `mapMutations` 也支持载荷
    //   'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commt('incrementBy', amount)`
    // ])
  }
}
</script>

<style>

</style>